<template>
  <div>
    <van-field
      v-model="iccid"
      is-link
      readonly
      label="SIM卡"
      placeholder="选择已实名的SIM卡"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        title="选择已实名的SIM卡"
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="(value)=>{
          this.iccid = value
          this.showPicker = false
        }"
      />
    </van-popup>
    <van-cell-group inset style="margin: 0 0 20px" v-if="currentPkg.pkgName">
      <van-cell class="my-cell">
        <template #title>
          <van-button style="width: 70px;height: 100%;padding: 0;font-size: 12px" square type="info">主流量包</van-button>
        </template>
        <template #default>
          <div v-if="currentPkg.pkgName">
            <div class="cell-value_title">
              {{currentPkg.pkgName}}
            </div>
            <div class="cell-value_title">
              剩余流量：{{currentPkg.remainFlow/1024}}MB
            </div>
            <div class="cell-value_date">
              有效期截止：{{currentPkg.expireTime}}
            </div>
          </div>
          <div v-else style="height: 60px;line-height: 60px">
            暂无主包
          </div>
        </template>
      </van-cell>
    </van-cell-group>
    <van-tabs type="line" v-if="!normalData.length" @change="tabChange">
      <van-tab name="1" title="主流量包"><Dcard :card-data="cardData" :current-exp-time="currentPkg.expireTime" @selectedItem="setMainPackageData"></Dcard></van-tab>
      <van-tab name="2" title="加油包" :disabled="!currentPkg.pkgName"><Dcard :card-data="fuelData" :current-exp-time="currentPkg.expireTime"  @selectedItem="setMainPackageData"></Dcard></van-tab>
    </van-tabs>
    <van-tabs type="line" v-if="normalData.length">
      <van-tab title="普通包"><Dcard :card-data="normalData" :current-exp-time="currentPkg.expireTime" @selectedItem="setMainPackageData"></Dcard></van-tab>
    </van-tabs>
    <div style="margin:40px 0;padding: 0 20px" >
      <van-button type="warning" style="width: 100%" :disabled="!Boolean(mainPackage)" @click="goToOrderConfirm">提交订单</van-button>
      <div class="tips">
        <span> 1、叠加订购主流量包时，有效期顺延 </span>
        <span>2、加油包有效期和当前可用主流量包相同 </span>
      </div>
    </div>
  </div>
</template>

<script>
  import Dcard from '../../components/Dcard'
  import {Toast} from 'vant'
  import {getCardList, getPkgByCard, trade,getMasterOrder} from "../../api/user";
  import {checkSystem, urlSearch} from "../../utils";
  export default {
    components:{Dcard,Toast},
    name: "index",
    data() {
      return {
        iccid: '',
        showPicker: false,
        currentPkg:{},
        columns:[],
        totalCardList:[],
        mainPackage:'',
        clientIp:returnCitySN["cip"],
        cardData: [],
        fuelData:[],
        normalData:[],
        currentOrderId:'',
        currentPackage:0,// 1 是主包 2 是加油包
      }
    },
    mounted() {
      this.getCardList()
    },
    watch:{
      iccid(value){
        this.getPkg(value,'ICCID')
        this.getMasterOrder(value,'ICCID')
      }
    },
    methods: {
      onFinish() {
        this.showPicker=false
        // todo
      },
      async getMasterOrder(sim,simType){
        const res = await getMasterOrder({sim,simType})
        this.currentPkg = res.data||{}
        this.currentOrderId = res.data.orderId
      },
      tabChange(name,title){
        this.currentPackage = name
      },
      getCardList() {
        getCardList(this.clientId).then(res => {
          this.columns = res.data.filter(item=>item.realStatus===2).map(item=>item.iccid)
          this.totalCardList = res.data
          this.iccid = urlSearch('iccid')||this.columns[0]
          this.getMasterOrder(
            this.iccid, 'ICCID'
          )
        })
      },
      async getPkg(sim,simType){
        const res = await getPkgByCard({sim,simType})
        this.cardData = res.data.master
        this.fuelData = res.data.fuel
        this.normalData = res.data.normal||[]
      },
      async goToOrderConfirm(){
        const currentData = this.mainPackage
        const reqData = {
          amount: currentData.price,
          clientIp:this.clientIp,
          h5Type:checkSystem(), //机型是安卓还是ios
          iccid:this.iccid,
          msisdn:this.totalCardList.filter(item=>item.iccid===this.iccid)[0].msisdn,
          simId:this.totalCardList.filter(item=>item.iccid===this.iccid)[0].simId,
          payType:1,
          pkgId:currentData.id,
          pkgName:currentData.pkgName,
          relatedOrderId:this.currentPackage === '2'&& !this.normalData.length?this.currentOrderId:null
        }
        try {
          const res = await trade(reqData)
          this.$router.push('/order/confirm?id='+res.data.id)
        }catch (e) {
          Toast('提交订单失败');
        }

        // this.$router.push('/order/confirm',)
      },
      setMainPackageData(value){
        this.mainPackage = value
      }
    },
  }
</script>

<style lang="scss" scoped>
.my-cell{
  font-size: 14px;
  ::v-deep .van-cell__title{
    flex: 0;
  }
  ::v-deep .van-cell__value{
    margin-left: 5px;
    flex: 0.7;
    text-align: left;
  }
  .cell-value_title{
    color: #323233;
    font-size: 14px;
  }
}
</style>
